{% extends 'base.html' %}
{% load static %}
{% load  sizeformat %}

{% block head %}

{% endblock %}
{% block title %}镜像列表{% endblock %}

{% block boby %}
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <span class="card-title"><strong>镜像列表 ({{ count }})</strong></span>
            </div>
            <div class="card-body">
                <form role="form" class="form-horizontal" method="get" action="">
                    <div class="input-group" style="">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="id-center">分中心</label>
                        </div>
                        <select name="center" class="custom-select" id="id-center">
                            <option value="">--</option>
                            {% for c in centers %}
                                <option value="{{ c.id }}" {% if c.id == center_id %}selected{% endif %}>
                                    {{ c.name }}
                                </option>
                            {% endfor %}
                        </select>
                        <div class="input-group-prepend">
                            <label class="input-group-text"  for="id-tag">标签</label>
                        </div>
                        <select name="tag" class="custom-select" id="id-tag">
                            <option value="">--</option>
                            {% for val, name in tags %}
                                <option value="{{ val }}" {% if val == tag_value %}selected {% endif %}>{{ name }}</option>
                            {% endfor %}
                        </select>
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="id-sys-type">系统类型</label>
                        </div>
                        <select name="sys_type" class="custom-select" id="id-sys-type">
                            <option value="">--</option>
                            {% for val, name in sys_types %}
                                <option value="{{ val }}" {% if val == sys_type_value %}selected {% endif %}>{{ name }}</option>
                            {% endfor %}
                        </select>
                        <div class="input-group-prepend">
                            <label class="input-group-text">关键字</label>
                        </div>
                        <input type="text" class="form-control" name="search" value="{{ search }}"
                               placeholder="搜 名称、备注"/>
                        <button type="submit" class="btn btn-primary form-control">筛选</button>
                    </div>
                </form>
            </div>
            <table class="table table-hover table-vm-list" style="word-wrap:break-word;word-break:break-all;">
                <thead class="thead-light">
                <tr>
                    <th>名称</th>
                    <th>版本信息</th>
                    <th>系统类型</th>
                    <th>镜像标签</th>
                    <th>创建时间</th>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody>
                {% for image in images %}
                    <tr id="tr_{{ image.id }}">
                        <td title="{{ image.id }}"><a href="#"><b>{{ image.name }}</b></a></td>
                        <td>{{ image.version }}</td>
                        <td>{{ image.sys_type_display }}</td>
                        <td>{{ image.tag_display }}</td>
                        <td>{{ image.create_time|date:'Y-m-d H:i:s' }}</td>
                        <td class="mouse-hover" style="max-width: 200px;">
                            <div>
                                <span>{{ image.desc|default_if_none:'' }}</span>
                                <span class="mouse-hover-show edit_vm_remark" data-image-id="{{ image.id }}" style="display:none;" title="修改备注">
                                    <span class="glyphicon glyphicon-pencil"></span>
                                </span>
                            </div>
                            <div id="remarks_edit" style="display:none;">
                                <textarea id="remarks">{{ image.desc|default_if_none:'' }}</textarea>
                                <span class="save_vm_remark" title="保存备注" data-image-id="{{ image.id }}">
                                    <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
                                </span>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% with page_list=page_nav.page_list previous=page_nav.previous next=page_nav.next %}
                {% if page_list %}
                    <div class="card-footer">
                        <nav aria-label="Page navigation">
                            <ul class="pagination"  style="margin:0;">
                                {% if previous %}
                                    <li class="page-item"><a class="page-link" href="?{{ previous }}" aria-label="Previous"><span
                                            aria-hidden="true">&laquo;</span></a></li>
                                {% else %}
                                    <li class="page-item disable"><span class="page-link" aria-hidden="true">&laquo;</span></li>
                                {% endif %}
                                {% for disp, query, active in page_list %}
                                    {% if active %}
                                        <li class="page-item active"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                    {% else %}
                                        <li class="page-item"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {% if next %}
                                    <li class="page-item"><a class="page-link" href="?{{ next }}" aria-label="Next"><span
                                            aria-hidden="true">&raquo;</span></a></li>
                                {% else %}
                                    <li class="page-item disable"><span class="page-link" aria-hidden="true">&raquo;</span></li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                {% endif %}
            {% endwith %}
        </div>
    </div>
{% endblock %}

{% block script %}

{% endblock %}
